<template>
    <div class="survey">
        <div class="month-box">
            <swiper :options="swiperOption" ref='swiper'>
                
                <swiper-slide v-for="(item, index) of monthList" :key="index" class="swiper-no-swiping">
                    <h2 class="month">{{ item }}</h2>
                </swiper-slide>
            </swiper>
            
        </div>
        <h2 class="month-text">月</h2>
        <div class="day-box">
            <p class="day">{{ date }}</p>
            <p class="year">{{ year }}</p>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        date: String,
        year: Number
    },
    name: "Survey",
    data () {
        return {
            monthList: [],
            swiperOption: {
                autoplay: false,
                initialSlide: 0,
                noSwiping : true
                
            }
        }
    },
    methods: {
        toToday () {
            let swiper = this.$refs.swiper.swiper;
            swiper.slideTo(0);
        },
        initMonthList () {
            function figureMonth(month) {
                if (month < 1) return 12 + (month % 12);
                if (month > 12) return month % 12;
                return month;
            }
            var date = new Date();
            var month = date.getMonth() + 1;
            var monthList = [];
            monthList[0] = month;
            monthList[1] = figureMonth(month + 1);
            monthList[2] = figureMonth(month + 2);
            monthList[3] = figureMonth(month + 3);
            monthList[4] = figureMonth(month + 4);
            this.monthList = monthList;
            console.log(monthList)
        },
        slide (direction) {
            var swiper = this.$refs.swiper.swiper;
            if (direction === 'left') {
                
                swiper.slidePrev();
               
            } else {
                 swiper.slideNext();
            }
        }
    },
    mounted () {
        this.initMonthList();
    }
}
</script>

<style lang="stylus" scoped>
    .survey >>> .swiper-container 
        width 1.2rem !important 
        overflow hidden
    .survey >>> .swiper-wrapper 
        display flex
    .survey >>> .swiper-slide 
        flex-shrink 0       
        width 1.2rem !important
        overflow hidden !important
    .survey
        width 90%
        height 1.7rem
        display flex
        align-items flex-end
        .month-text
            font-size .87rem
            color #000
            margin-bottom .1rem
        .month-box
            height 100%
            width 1.2rem
            overflow hidden
            display flex
            align-items flex-end
            .month
                font-size .88rem
                color #000
                margin-bottom .05rem
        .day-box
            height 100%
            flex-grow 1
            display flex
            flex-direction column
            align-items flex-start
            justify-content flex-end
            .day, .year
                font-size .35rem
            .year
                margin-top .1rem
                
                
                
            
            
</style>


